<template>
	<BasicDrawer v-bind="$attrs" @register="register" title="Drawer Title" width="50%">
		<div>
			<BasicForm @register="registerForm" />
		</div>
	</BasicDrawer>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { BasicDrawer, BasicForm } from '#/components';
import { useDrawerInner, useForm } from '#/hooks';
import type { FormSchema } from '#/types';

const schemas: FormSchema[] = [
	{
		field: 'field1',
		component: 'Input',
		label: '字段1',
		colProps: {
			span: 12,
		},
		defaultValue: '111',
	},
	{
		field: 'field2',
		component: 'Input',
		label: '字段2',
		colProps: {
			span: 12,
		},
	},
];
export default defineComponent({
	components: { BasicDrawer, BasicForm },
	setup() {
		const [registerForm, { setFieldsValue }] = useForm({
			labelWidth: 120,
			schemas,
			showActionButtonGroup: false,
			actionColOptions: {
				span: 24,
			},
		});
		const [register] = useDrawerInner(data => {
			// 方式1
			setFieldsValue({
				field2: data.data,
				field1: data.info,
			});
		});
		return { register, schemas, registerForm };
	},
});
</script>
